<template>
  <div class="canves_main">
    <m-header modile-title="电子签名" go-back="true"></m-header>
    <div class="canvasBox" ref="canvasHW">
      <canvas
        id="canva"
        @touchstart='touchStart'
        @touchmove='touchMove'
        @touchend='touchEnd'
        ref="canvasF"
        @mousedown="mouseDown"
        @mousemove="mouseMove"
        @mouseup="mouseUp"></canvas>
      <div class="btnBox">
        <button @click="overwrite">重写</button>
        <button @click="saveWrite">提交签名</button>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .canves_main {
    padding-top: 44px;
    width: 100%;
    height: 600px;
    background: url("./image/canvas.png");
    background-size: 100% 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow: visible;
    .canvasBox {
      /*画布距离*/
      /*padding: 10px 5px;*/
      box-sizing: border-box;
      flex: 1;
    }

    canvas {
      /*border: 1px solid #ff0000;*/
    }

    .btnBox {
      height: 30px;
      padding: 5px;
      text-align: right;
      line-height: 30px;
    }

    .btnBox button:first-of-type {
      border: 1px solid #71b900;
      background: transparent;
      border-radius: 4px;
      padding: 5px 10px;
    }

    .btnBox button:last-of-type {
      border: 1px solid #71b900;
      background: #71b900;
      color: #fff;
      border-radius: 4px;
      padding: 5px 10px;
    }

    @media only screen and (min-width: 750px) {
      .signatureBox {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        min-height: 100%;
        box-sizing: border-box;
        overflow: visible;
      }
    }
  }
</style>
<script>
  import mHeader from '../../../components/header'

  export default {
    name: 'CanvesSign',
    data() {
      return {
        points: [],
        canvasTxt: null,
        startX: 0,
        startY: 0,
        moveY: 0,
        moveX: 0,
        endY: 0,
        endX: 0,
        w: null,
        h: null,
        isDown: false,
        imgUrl: ''
      }
    },
    mounted() {
      let canvas = this.$refs.canvasF;
      canvas.height = this.$refs.canvasHW.offsetHeight + 334;
      // canvas.width = this.$refs.canvasHW.offsetWidth - 12;
      canvas.width = this.$refs.canvasHW.offsetWidth; // 铺面全屏的
      this.canvasTxt = canvas.getContext("2d")
    },
    methods: {
      // 电脑设备事件
      mouseDown(ev) { // 用户按下鼠标按钮时触发
        ev = ev || event;
        ev.preventDefault();
        // console.log(ev);
        if (1) {
          let obj = {
            x: ev.offsetX, // offsetX/Y:表示相对于定位父级的水平和垂直坐标
            y: ev.offsetY
          }
          // console.log(obj)
          this.startX = obj.x;
          this.startY = obj.y;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
          this.isDown = true;
        }
      },

      // 移动设备事件（开始触发）
      touchStart(ev) {
        ev = ev || event;
        ev.preventDefault(); // 阻止元素发生默认的行为
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX, // clientX clientY:触摸目标在视口中的x，y坐标
            y: ev.targetTouches[0].clientY - 48
          };
          this.startX = obj.x;
          this.startY = obj.y;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
        }
      },
      //电脑设备事件
      mouseMove(ev) { // 鼠标指针在元素内部移动时重复的触发
        ev = ev || event;
        ev.preventDefault();
        if (this.isDown) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          };
          this.moveY = obj.y;
          this.moveX = obj.x;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.startY = obj.y;
          this.startX = obj.x;
          this.points.push(obj);
        }
      },
      //移动设备事件（连续触发）
      touchMove(ev) { // 手指在屏幕上滑动的时候连续触发，在这个事件发生期间，调用preventDefault事件可以阻止滚动
        ev = ev || event;
        ev.preventDefault();
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX,
            y: ev.targetTouches[0].clientY - 48
          };
          this.moveY = obj.y;
          this.moveX = obj.x;
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.startY = obj.y;
          this.startX = obj.x;
          this.points.push(obj);
        }
      },
      //电脑设备事件
      mouseUp(ev) { // 在用户释放鼠标按钮时触发
        ev = ev || event;
        ev.preventDefault();
        if (1) {
          let obj = {
            x: ev.offsetX,
            y: ev.offsetY
          };
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
          this.points.push({x: -1, y: -1});
          this.isDown = false;
        }
      },
      //移动设备事件（离开时触发）
      touchEnd(ev) {
        ev = ev || event;
        ev.preventDefault();
        // console.log(ev);
        if (ev.touches.length == 1) {
          let obj = {
            x: ev.targetTouches[0].clientX,
            y: ev.targetTouches[0].clientY - 48
          };
          this.canvasTxt.beginPath();
          this.canvasTxt.moveTo(this.startX, this.startY);
          this.canvasTxt.lineTo(obj.x, obj.y);
          this.canvasTxt.stroke();
          this.canvasTxt.closePath();
          this.points.push(obj);
          this.points.push({x: -1, y: -1});
        }
      },
      //重写
      overwrite() {
        this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height);
        this.points = []; // 清空画布上触发的事件（每一个触发点的xy）
      },
      //提交
      saveWrite() {
        const canvas = document.querySelector('#canva') // 获取canvas画布
        const src = canvas.toDataURL('image/png') // 将图片转为base64位的图片格式
        this.imgUrl = src
        console.log(this.imgUrl)
      }

    },
    components: {
      mHeader
    }
  }
</script>
